<template>
	<view class="page">
		<view class="title">售货机系统</view>


		<view class="form">
			<!-- 手机号 -->
			<view class="input-item">
				<input v-model="phone" type="number" placeholder="手机号" class="input" />
			</view>

			<!-- 密码 -->
			<view class="input-item password-item">
				<input v-model="password" :type="showPassword ? 'text' : 'password'" placeholder="密码" class="input"
					@focus="showPasswordToggle = true" @blur="handlePasswordBlur" />
				<text class="password-toggle" v-show="showPasswordToggle" @mousedown="handleToggleMouseDown"
					@click="togglePassword">
					{{ showPassword ? '👁️' : '🔒' }}
				</text>
			</view>

			<!-- 错误提示 -->
			<text class="error" v-if="error">{{ error }}</text>

			<!-- 登录按钮 -->
			<button class="btn login-btn" :loading="loading" @click="login">
				登录
			</button>

			<!-- 注册跳转 -->
			<text class="link" @click="toRegister">
				新用户？注册
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: '',
				error: '',
				loading: false,
				showPassword: false,
				showPasswordToggle: false,
				blurTimer: null
			}
		},
		methods: {
			login() {
				// 简单验证
				if (!this.phone || !/^1\d{10}$/.test(this.phone)) {
					this.error = '请输入正确手机号';
					return;
				}
				if (!this.password || this.password.length < 6) {
					this.error = '密码不少于6位';
					return;
				}

				this.loading = true;
				// 模拟登录请求
				setTimeout(() => {
					this.loading = false;
					uni.switchTab({
						url: '/pages/machine/index'
					});
				}, 1000);
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},
			togglePassword() {
				this.showPassword = !this.showPassword;
			},
			handleToggleMouseDown(e) {
				e.preventDefault(); // 阻止默认行为，避免触发输入框blur
			},
			handlePasswordBlur() {
				// 延迟隐藏按钮
				this.blurTimer = setTimeout(() => {
					this.showPasswordToggle = false;
				}, 150);
			}
		},
		beforeDestroy() {
			// 清除定时器
			if (this.blurTimer) {
				clearTimeout(this.blurTimer);
			}
		}
	}
</script>

<style scoped>
	.page {
		background: #fff;
		min-height: 100vh;
		padding: 120rpx 60rpx 0;
	}

	.title {
		font-size: 44rpx;
		font-weight: bold;
		color: #1677ff;
		text-align: center;
		margin-bottom: 100rpx;
	}

	.form {
		width: 100%;
	}

	.input-item {
		border-bottom: 1px solid #e5e7eb;
		margin-bottom: 40rpx;
		position: relative;
	}

	.password-item {
		display: flex;
		align-items: center;
	}

	.input {
		width: 100%;
		height: 80rpx;
		font-size: 30rpx;
		color: #333;
		padding-right: 80rpx;
	}

	.password-toggle {
		position: absolute;
		right: 0;
		color: #1677ff;
		font-size: 36rpx;
		padding: 20rpx;
		cursor: pointer;
		user-select: none;
	}

	.error {
		display: block;
		color: #ff4d4f;
		font-size: 26rpx;
		margin: -20rpx 0 40rpx;
		height: 30rpx;
	}

	.btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.login-btn {
		background: #1677ff;
		color: #fff;
	}

	.link {
		display: block;
		text-align: center;
		color: #1677ff;
		font-size: 28rpx;
		margin-top: 20rpx;
	}
</style>